<template>
	<view class="main">
		<view class="list">
			<button open-type="chooseAvatar" class="upload-wrap" @chooseavatar="onChooseAvatar">
				<image
					:src="avatarUrl || form.avatar || '/static/default_avatar.png'"
					mode="aspectFill"
					style="width: 140rpx; height: 140rpx; border-radius: 50%; border: 1px #eee solid"
				></image>
				<view class="icon-wrap">设置头像</view>
			</button>
			<u--form
				labelPosition="left"
				:model="form"
				ref="uForm"
				labelWidth="180rpx"
				labelStyle="font-size:28rpx"
			>
				<u-form-item prop="nickName" label="昵 称" borderBottom>
					<u--input
						v-model="form.nickName"
						placeholder="请输入昵称"
						border="none"
						type="nickname"
					></u--input>
				</u-form-item>
				<u-form-item prop="trueName" label="姓 名" borderBottom>
					<u--input
						v-model="form.trueName"
						placeholder="请输入真实姓名"
						border="none"
						disabled
						disabledColor="#eee"
					></u--input>
				</u-form-item>
				<u-form-item label="手 机" prop="mobile">
					<u--input
						v-model="form.mobile"
						disabled
						disabledColor="#eee"
						placeholder="请输入手机号"
						border="none"
					></u--input>
				</u-form-item>
			</u--form>
		</view>
		<button class="footer-btn" @click="submit">保存</button>
	</view>
</template>

<script>
const app = getApp()
const { uploadFunc } = require('@/utils/upload.js')
export default {
	data() {
		return {
			userinfo: {},
			form: {
				trueName: '',
				cid: '',
				cidNo: '',
				avatar: '',
				nickName: ''
			},
			avatarUrl: ''
		}
	},
	onLoad(options) {
		this.form =
			JSON.stringify(app.globalData.userInfo) !== '{}'
				? app.globalData.userInfo
				: wx.getStorageSync('userinfo')
	},
	methods: {
		getInfo() {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			/* prettier-ignore */
			this.$https( true, 'post', {
				url: '/Home/Cinema/getInfo',
				data: {
					token: uni.getStorageSync('token')
				}
			}, (res) => {
				res.data.cin_logo = res.data.cin_logo || '/static/my_default_img.png'
				this.userinfo = res.data
			})
			/* prettier-ignore */
		},
		onChooseAvatar(e) {
			const { avatarUrl } = e.detail
			this.avatarUrl = avatarUrl
		},
		async submit() {
			const data = {
				trueName: this.form.trueName,
				nickName: this.form.nickName
			}
			if (this.avatarUrl) {
				const result = await uploadFunc([{ url: this.avatarUrl }])
				data.avatar = result.length ? result[0].url : ''
			}
			/* prettier-ignore */
			this.$https( false, 'post', {
					url: '/member/member/update',
					data
				},(res) => {
					uni.showToast({
						title:'修改成功！'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},600)
				})
			/* prettier-ignore */
		}
	}
}
</script>

<style lang="scss" scoped>
.main {
	padding: 16rpx 0;
}
.upload {
	position: relative;
	margin: 0 auto;
	&-wrap {
		width: 460rpx;
		margin: 0 auto 72rpx;
		padding: 68rpx 0 0;
		background: transparent;
		text-align: center;
		line-height: 1;
	}
	&-txt {
		font-size: 26rpx;
		color: rgba(0, 0, 0, 0.7);
		margin-top: 12rpx;
	}
}
.icon-wrap {
	height: 48rpx;
	width: 100%;
	text-align: center;
	color: #999;
	font-size: 26rpx;
	margin-top: 16rpx;
}
.list {
	padding: 0 50rpx 10rpx;
	background-color: #fff;
}
.footer-btn {
	width: 680rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #e50012;
	border-radius: 16rpx;
	font-size: 28rpx;
	color: #fff;
	margin: 100rpx auto;
}
::v-deep {
	.u-form-item {
		margin-bottom: 12rpx;
	}
	.list .u-input__content__field-wrapper__field {
		height: 56rpx;
		line-height: 56rpx;
	}
}
</style>
